<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<p style="padding-bottom: 12px">
    <span>{{'desc' | translate}}</span>
    <span [innerHtml]="'lang' | translate:  { lang: this.translateService.currentLang }"></span>
</p>
<jigsaw-button (click)="changeLang('en')">
    change language to English
</jigsaw-button>
<jigsaw-button (click)="changeLang('zh')">
    change language to Chinese
</jigsaw-button><br>

<h4>alert</h4><jigsaw-info-alert [initData]="infoInitData"></jigsaw-info-alert><br>
<h4>dialog</h4>
<jigsaw-dialog width="400" [buttons]="buttons">
    <div jigsaw-title>
        <span class="fa fa-thumbs-up"></span>{{'dialogTitle' | translate}}
    </div>
    <div jigsaw-body>
        <div class="dialog-content">
            <span class="fa fa-info-circle"></span> <span>{{'dialogContent' | translate}}</span>
        </div>
    </div>
</jigsaw-dialog>
<h4>range-time</h4><jigsaw-range-time></jigsaw-range-time><br>
<h4>time</h4><jigsaw-time></jigsaw-time>
<br>
<h4>pagination</h4>
<jigsaw-pagination [data]="pageable"
                   [pageSizeOptions]="[5,10,20]"
                   [searchable]="true"
                   [showQuickJumper]="true"
                   width="710px">
</jigsaw-pagination>
